<template>
   <div class="overview">
    <el-row>
      <el-col :span="24">
        <KiCard>
          <template #title>关于</template>
          <template #content>
            基于Vue3、pinia、VueRouter、VueCli、ElementPlus、TypeScript、Echarts5等构成
          </template>
        </KiCard>
      </el-col>
    </el-row>
    <el-row class="row2">
      <el-col :span="24">
        <KiCard>
          <template #title>技术栈</template>
          <template #content>
            <ul class="list">
              <li>开发工具：Vistual Studio Code</li>
              <li>编程语言：TypeScript 4.x</li>
              <li>构建工具：vite</li>
              <li>前端框架：Vue 3.x</li>
              <li>路由工具：Vue Router 4.x</li>
              <li>状态管理：pinia</li>
              <li>UI框架：Element Plus</li>
              <li>可视化：Echart5.x</li>
              <li>CSS预编译：Less</li>
              <li>HTTP工具：Axios</li>
            </ul>
          </template>
        </KiCard>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import KiCard from '@/components/ki-card/KiCard.vue';
</script>

<style scoped>
.row2 {
  margin-top: 30px;
}
.list {
  text-align: left;
}
.list > li {
  padding: 5px 0;
}
</style>